<script setup lang="ts">
</script>

<!-- Dropdown、Select、Popover、 -->
<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      Dropdown 兼容移动和PC
    </h4>

    <p class="text-sm text-gray">
      Dropdown 的 trigger 属性默认是 hover，但由于移动端设备没有 hover 事件，所以导致各种问题。
    </p>
    <p class="text-sm text-gray">
      解决方法是将trigger 属性设置为 ['click', 'hover'] 或 click。
    </p>
    <p class="text-sm text-red">
      这些组件同理：Popover、Tooltip、Popconfirm(不需要)
    </p>

    <ADropdown :trigger="['click', 'hover']">
      <AButton>Click me</AButton>
      <template #overlay>
        <AMenu @mousedown.stop="">
          <AMenuItem>
            <a href="javascript:;">1st menu item</a>
          </AMenuItem>
          <AMenuItem>
            <a href="javascript:;">2nd menu item</a>
          </AMenuItem>
          <AMenuItem>
            <a href="javascript:;">3rd menu item</a>
          </AMenuItem>
        </AMenu>
      </template>
    </ADropdown>

    <APopconfirm title="OK 不 OK ？">
      <AButton>Click me</AButton>
    </APopconfirm>
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mt-0">
      Select 兼容移动和PC
    </h4>

    <p class="text-sm text-gray">
      移动端上通过模拟 mousedown 事件解决 touch 事件无法关闭 select
    </p>

    <div class="flex gap-2">
      <ASelect class="w-30" :virtual="false">
        <ASelectOption value="jack">
          Jack
        </ASelectOption>
        <ASelectOption value="lucy">
          Lucy
        </ASelectOption>
        <ASelectOption value="disabled" disabled>
          Disabled
        </ASelectOption>
        <ASelectOption value="Yiminghe">
          yiminghe
        </ASelectOption>
      </ASelect>

      <TAntdTheme component="Select" theme="light">
        <ASelect class="w-30">
          <ASelectOption value="jack">
            Jack
          </ASelectOption>
          <ASelectOption value="lucy">
            Lucy
          </ASelectOption>
          <ASelectOption value="disabled" disabled>
            Disabled
          </ASelectOption>
          <ASelectOption value="Yiminghe">
            yiminghe
          </ASelectOption>
        </ASelect>
      </TAntdTheme>

      <ADatePicker format="YYYY-MM-DD HH:mm:ss" inputReadOnly />
    </div>
  </div>
</template>
